<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-20 09:10:06
 * @LastEditors: zzb
 * @LastEditTime: 2022-12-29 09:02:39
-->
<template>
  <el-form ref="form" :model="security" :rules="rules" label-width="100px">

    <el-form-item label="双因子认证" prop="twoFactorAuthenticationStatus">
      <el-switch v-model="twoFactorAuthenticationStatus" @change="changeStatus" active-color="#358f80" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0">
      </el-switch>
      <font color='red' style="marginLeft:30px">请先保存好问题和答案后，再进行开启双因子认证</font>
    </el-form-item>
    <el-form-item label="选择问题" prop="dictLabel">
      <el-select v-model="security.dictLabel" placeholder="请选择问题" style="width: 100%;">
        <el-option v-for="item in questionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="设置答案" prop="answer">
      <el-input v-model="security.answer" placeholder="请设置答案" />
    </el-form-item>
    <el-form-item label="密码" prop="password" v-if="false">
      <el-input type='password' v-model="security.password" placeholder="请输入密码" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  setSecurityQuestionAnswer, //用户设置安全问题
  deleteSecurityQuestionAnswer, //删除一个安全问题
  clearSecurityQuestionAnswer, //07、清空安全问题
  settingTwoFactorAuthentication, //08、用户设置是否开启双因子认证
  checkExpirationTime, //09、检查用户密码还有多久过期
  getSecurityQuestionList, // 05、读取安全问题列表
} from "@/api/login";

export default {
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      //是否开启双因子认证
      twoFactorAuthenticationStatus: 0,
      // 问题列表
      questionList: [],
      security: {
        dictLabel: undefined,
        answer: undefined,
        // password: undefined,
      },
      // 表单校验
      rules: {
        dictLabel: [
          { required: true, message: "安全问题不能为空", trigger: "blur" },
        ],
        answer: [
          { required: true, message: "问题答案不能为空", trigger: "blur" },
        ],
        // password: [
        //   { required: true, message: "登录密码不能位空", trigger: "blur" },
        // ],
      },
    };
  },
  computed: {},
  mounted() {
    this.getList();
    this.$nextTick(() => {
      this.init();
      this.twoFactorAuthenticationStatus =
        this.user.twoFactorAuthenticationStatus;
    });
  },
  methods: {
    init() {
      this.security.dictLabel = this.user?.dictLabelList[0];
    },
    getList() {
      getSecurityQuestionList().then((res) => {
        this.questionList = res.data;
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$prompt("请输入密码", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
            .then(({ value }) => {
              this.security.password = value;
              setSecurityQuestionAnswer(this.security).then((res) => {
                this.msgSuccess(res.msg);
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消输入",
              });
            });
        } else {
          this.twoFactorAuthenticationStatus = false;
        }
      });
    },
    // 改变是否认证
    changeStatus(status) {
      if (status) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.handleSettingStatus(1);
          } else {
            this.twoFactorAuthenticationStatus = false;
          }
        });
      } else {
        this.handleSettingStatus(0);
      }
    },
    handleSettingStatus(status) {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.security.password = value;
          settingTwoFactorAuthentication(this.security.password, status).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "双因子认证已开启",
                });
              }
            }
          );
        })
        .catch(() => {
          this.twoFactorAuthenticationStatus = false;
          this.$message({
            type: "info",
            message: "取消开启",
          });
        });
    },
    handleSettingQuestion() {},
    //清空安全问题
    close() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          clearSecurityQuestionAnswer(value).then((res) => {
            this.$message({
              type: "success",
              message: "安全问题已清空",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>
